/**
 *  created by lllwx
 *  date: 2021/10/8
 *  time: 5:01 下午
 *  version: 1.0
 *  desc:
 */
import {
  watch,
  defineComponent, h, toRefs, ref, unref,
} from '@vue/composition-api';
import { Grid } from 'vxe-table';
import Paging from '../KtPaging/index.vue';

const BasicTable = defineComponent({
  name: 'KtTable',
  props: {
    schemas: {
      type: Array,
      required: true,
    },
    tableProps: {
      type: Object,
      required: true,
    },
    pageLimit: {
      type: Object,
      required: false,
      default: () => {},
    },
  },
  emits: ['sort-change'],
  setup(props, { slots, listeners }) {
    const { pageLimit, schemas, tableProps } = toRefs(props);

    const tableSchemas = ref([]);
    watch(() => schemas.value, (value) => {
      tableSchemas.value = value.map((item) => ({
        ...item,
        title: unref(item.title),
      }));
    }, { deep: true, immediate: true });

    const onPaging = {
      'update:pageNo': (page) => { pageLimit.value.pageNo = page; },
      'update:pageSize': (limit) => { pageLimit.value.pageSize = limit; },
    };

    function getPage() {
      return <Paging { ...{ props: { ...tableProps.value, ...pageLimit.value }, on: { ...onPaging } } } />;
    }

    return () => <div style="height:calc(100% - 80px)">
      {
        h(
          Grid,
          {
            props: {
              ...tableProps.value,
              columns: tableSchemas.value,
              highlightHoverRow: true,
            },
            on: { ...listeners },
            scopedSlots: slots,
          },
        )
      }
      {tableProps.value.pagination && getPage()}
    </div>;
  },
});

export default BasicTable;
